<!--  -->
<template>
  <div class=''>
    <el-steps :active="active" finish-status="success"
     style="margin-top: 20px;margin-left: 20px;margin-right: 20px;">
     <el-step title="换宿准则"></el-step>
    <el-step title="原因填写"></el-step>
    <el-step title="材料上传"></el-step>
    <el-step title="提交成果"></el-step>
  </el-steps>
  
  
  <el-row :gutter="20" v-show="show4" >
    <div style="text-align: center">
    <h1 >关于2023年，学生换宿条例</h1>
    <h3>(1):xxxxxxxx</h3>
    <h3>(1):xxxxxxxx</h3>
    <h3>(1):xxxxxxxx</h3>
    <h3>(1):xxxxxxxx</h3>
    <h3>(1):xxxxxxxx</h3>
    <h3>(1):xxxxxxxx</h3>
    <h3>(1):xxxxxxxx</h3>
    <h3>(1):xxxxxxxx</h3>
    <h3>(1):xxxxxxxx</h3>
    <h3>(1):xxxxxxxx</h3>
    <h3>(1):xxxxxxxx</h3>
  </div>
    <el-button style="margin-top: 12px;margin-left: 630px;" @click="next">确定</el-button>
  
  </el-row>
    <el-row :gutter="20" v-show="show" >
    <el-col :span="16" :offset="4" ><div class="grid-content bg-purple" 
       style="margin-top:10px;margin-left:200px"  >
  
  
      <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="楼栋" style="width:300px">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="宿舍号" style="width:300px">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="新楼栋">
      <el-select v-model="form.region" placeholder="请选择活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="新宿舍号">
      <el-select v-model="form.region" placeholder="请选择活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="申请时间">
      <el-col :span="11">
        <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
      </el-col>
     
    </el-form-item>
    
    <el-form-item label="申请原因">
      <el-checkbox-group v-model="form.type">
        <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
        <el-checkbox label="地推活动" name="type"></el-checkbox>
        <el-checkbox label="线下主题活动" name="type"></el-checkbox>
        <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
      </el-checkbox-group>
    </el-form-item>
  
    <el-form-item label="具体原因">
      <el-input type="textarea" v-model="form.desc"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button style="margin-top: 12px;" @click="pre">上一步</el-button>
  <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
    </el-form-item>
  </el-form>
  
    </div></el-col>
   
  </el-row>
  <el-row :gutter="20" v-show="show2" >
    <el-col :span="16" :offset="4" ><div class="grid-content bg-purple" 
       style="margin-top:10px;margin-left:200px"  >
  
  
      <el-form ref="form" :model="form" label-width="80px">
    <el-form-item>
      <el-upload
    class="upload-demo"
    drag
    action="https://jsonplaceholder.typicode.com/posts/"
    multiple>
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
    </el-form-item>
    <el-form-item>
      <el-button style="margin-top: 12px;" @click="pre">上一步</el-button>
      <el-button type="primary" @click="onSubmit">提交</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
  
    </div></el-col>
   
  </el-row>
  
  <el-row :gutter="20" v-show="show3" >
  
    <el-result icon="success" title="提交成功" subTitle="处理中...">
       
      </el-result>
  </el-row>
  </div>
  </template>
  
  <script>
  //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  //例如：import 《组件名称》 from '《组件路径》';
  import * as echarts from 'echarts';
  
  export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
  //这里存放数据
  return {
    form: {
            name: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: '',
            dialogImageUrl: '',
          dialogVisible: false,
         
          },
          active: 0,
          show:false,
          show2:false,
          show3:false,
          show4:true
  };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    onSubmit() {
          console.log('submit!');
          this.show=false
          this.show2=false
          this.show3=true
          if (this.active++ > 2) this.active = 0;
        },
        handleRemove(file, fileList) {
          console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
          this.dialogImageUrl = file.url;
          this.dialogVisible = true;
        },
        next() {
          this.active++;
          if(this.active==0){
            this.show4 = true
            this.show3 =false
            this.show2 =false
            this.show =false
          }
         else if(this.active==1){
            this.show4 = false
            this.show3 =false
            this.show2 =false
            this.show =true
          }else if(this.active==2){
            this.show4 = false
            this.show3 =false
            this.show2 =true
            this.show =false
          }
         console.log(this.active,'==2====');
       
        },
        pre() {
          this.active--
          if(this.active==0){
            this.show4 = true
            this.show3 =false
            this.show2 =false
            this.show =false
          }
         else if(this.active==1){
            this.show4 = false
            this.show3 =false
            this.show2 =false
            this.show =true
          }else if(this.active==2){
            this.show4 = false
            this.show3 =false
            this.show2 =true
            this.show =false
          }
          console.log(this.active,'==1====');
         
        //判断条件，当active小于1，显示第一个组件
    
        }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
  
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }
  </script>
  
  </style>